[#assign title]好友历史充值金额[/#assign]
[#include "/common/_layout.html"/]
[#macro style]
<style></style>
[/#macro]
[#macro body]
<mt-picker :slots="slots" :show-toolbar="true" value-key="label" visible-item-count="3" @change="onValuesChange">
    <h3 class="text-center">选择时间</h3>
</mt-picker>
<mt-cell title="本期好友充值金额">
    <span class="text-danger">{{summation}}元</span>
</mt-cell>
<div class="row">
    <div class="col-12 pre-scrollable"
         :style="{'max-height': inviteeHeight}">
        <mt-loadmore :top-method="refresh" ref="loadmore"
                     infinite-scroll-disabled="allLoaded" infinite-scroll-distance="30">
            <div class="media scrollable-border py-1" v-for="invitee in inviteeList">
                <img class="mr-2" :src="invitee.head | headImg" :alt="invitee.nickname"/>
                <div class="media-body">
                    <div class="d-flex justify-content-between">
                        <span>{{invitee.nickname}}</span>
                        <span class="d-flex align-items-center text-success"
                              v-if="invitee.balance && invitee.balance > 0">￥{{invitee.balance}}</span>
                        <span class="d-flex align-items-center text-danger" v-else>未充值</span>
                    </div>
                    <div class="text-muted">注册时间：{{invitee.createdDate | formatDate}}</div>
                </div>
            </div>
        </mt-loadmore>
        <div class="page-infinite-loading text-center">
            <span v-show="allLoaded">没有更多了</span>
            <span v-show="!allLoaded">
                <mt-spinner type="fading-circle"></mt-spinner>
                加载中...
            </span>
        </div>
    </div>
</div>
[/#macro]
[#macro script]
<script>
    var app = new Vue({
        el: '#app',
        data: {
            slots: [{
                values: [],
                textAlign: 'center'
            }],
            scheduleRule: {},
            page: 0,
            dateTimeScope: {
                start: undefined,
                end: undefined
            },
            lastSetTimeout: undefined,
            allLoaded: true,
            inviteeList: [],
            inviteeHeight: '0px'
        },
        methods: {
            onValuesChange: function (picker, values) {
                var data = values[0];
                if (!data) {
                    return;
                }
                var vm = this;
                if (vm.lastSetTimeout) {
                    clearTimeout(vm.lastSetTimeout);
                }
                vm.lastSetTimeout = setTimeout(function () {
                    vm.dateTimeScope.start = data.start;
                    vm.dateTimeScope.end = data.end;
                    vm.refresh();
                }, 1000);
            },
            /** 计算记录面板高度 */
            calcInviteeHeight: function () {
                var vm = this;
                vm.$nextTick(function () {
                    vm.inviteeHeight = vm.calcScrollHeight('.pre-scrollable') + 'px';
                });
            },
            refresh: function () {
                var vm = this;
                if (!vm.dateTimeScope.start) {
                    return;
                }
                axios.post('/invite/list', vm.dateTimeScope).then(function (response) {
                    vm.inviteeList = response.data;
                    vm.$refs.loadmore.onTopLoaded();
                }).catch(function (err) {
                    vm.$refs.loadmore.onTopLoaded();
                });
            }
        },
        computed: {
            summation: function () {
                var vm = this;
                var summation = 0;
                var data = vm.inviteeList;
                if (data) {
                    for (var index = 0; index < data.length; index++) {
                        summation = MoneyCalculate.accAdd(summation, data[index].balance);
                    }
                }
                return summation;
            },
            scheduleList: function () {
                var vm = this;
                var milli = 1000 * 60 * 60 * 24;
                var scheduleList = [];
                var start = vm.scheduleRule.start;
                var end = vm.scheduleRule.end;
                var duration = vm.scheduleRule.duration;
                var min = vm.scheduleRule.min;
                while (start > min) {
                    end = start;
                    start = start - (duration * milli);
                    scheduleList.push({
                        start: start / 1000,
                        end: end / 1000,
                        label: new Date(start).format('yyyy-MM-dd') + ' - ' + new Date(end - milli).format('yyyy-MM-dd')
                    });
                }
                return scheduleList;
            }
        },
        filters: {},
        watch: {},
        mounted: function () {
            var vm = this;
            axios.get('/invite/history/schedule').then(function (response) {
                vm.scheduleRule = response.data;
                vm.slots[0].values = vm.scheduleList;
            });
            vm.refresh();
            vm.calcInviteeHeight();
        }
    });
</script>
[/#macro]